<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员运输管理</title>
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/管理员运输管理.css">

</head>

<body class="bg-gray-100">
<!-- 侧边栏 -->
<div class="flex h-screen">
    <div class="sidebar bg-primary-dark text-primary-light w-64 p-4">
        <div class="logo mb-8">
            <h2 class="text-2xl font-bold">管理系统</h2>
        </div>
        <div class="nav-menu space-y-4">
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-shopping-cart mr-3"></i>
                <span><a href="管理员订单管理.html">订单管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer active">
                <i class="fas fa-truck mr-3"></i>
                <span><a href="管理员运输管理.html">运输管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-boxes mr-3"></i>
                <span><a href="管理员库存管理.html">库存管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-warehouse mr-3"></i>
                <span><a href="管理员仓库管理.html">仓库管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-users mr-3"></i>
                <span><a href="管理员用户管理.html">用户管理</a></span>
            </div>
            <div class="nav-item flex items-center hover:bg-gray-700 p-2 rounded cursor-pointer">
                <i class="fas fa-cog mr-3"></i>
                <span><a href="管理员系统设置.html">系统设置</a></span>
            </div>
        </div>
    </div>
    <!-- 主内容区域 -->
    <div class="flex-1 overflow-y-auto">
        <!-- 头部 -->
        <div class="header bg-white shadow-md p-4 flex justify-between items-center">
            <div class="search-bar relative">
                <input type="text" id="search-input" placeholder="搜索..."
                       class="border border-gray-300 rounded p-2 pr-10 w-64 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                <i class="fas fa-search absolute right-3 top-3 text-gray-500"></i>
            </div>
            <div class="user-info flex items-center">
                <img src="https://picsum.photos/30/30" alt="用户头像" class="rounded-full mr-2">
                <span class="font-bold">管理员</span>
            </div>
        </div>
        <!-- 管理员工具栏 -->
        <div class="admin-toolbar bg-white p-4 shadow-md flex justify-between items-center">
            <div class="quick-stats flex space-x-8">
                <div class="stat-item stat-card">
                    <i class="fas fa-truck mr-3"></i>
                    <div class="stat-value">100</div>
                    <div class="stat-label text-gray-500">总运输订单数</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 5%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-truck-loading mr-3"></i>
                    <div class="stat-value">20</div>
                    <div class="stat-label text-gray-500">今日发货订单</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 10%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-truck-moving mr-3"></i>
                    <div class="stat-value">60</div>
                    <div class="stat-label text-gray-500">在途订单</div>
                    <div class="stat-change"><i class="fas fa-arrow-down"></i> 3%</div>
                </div>
                <div class="stat-item stat-card">
                    <i class="fas fa-check-circle mr-3"></i>
                    <div class="stat-value">20</div>
                    <div class="stat-label text-gray-500">已送达订单</div>
                    <div class="stat-change"><i class="fas fa-arrow-up"></i> 8%</div>
                </div>
            </div>
            <div class="action-buttons flex space-x-4">
                <button class="btn btn-primary-custom">导出运输数据</button>
                <button class="btn btn-success bg-green-500 text-white p-2 rounded hover:bg-green-600">生成运输报告</button>
            </div>
        </div>
        <!-- 仪表盘 -->
        <div class="dashboard p-4">
            <div class="dashboard-title flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">运输管理仪表盘</h3>
                <div class="dropdown relative">
                    <button class="btn btn-warning bg-yellow-500 text-white p-2 rounded hover:bg-yellow-600">高级操作</button>
                    <div class="dropdown-content rounded">
                        <a href="#" class="block p-2 hover:bg-gray-200">批量导入运输订单</a>
                        <a href="#" class="block p-2 hover:bg-gray-200">运输数据清理</a>
                    </div>
                </div>
            </div>
            <div class="filter-bar flex space-x-4 mb-4">
                <div class="filter-group">
                    <label for="transport-status-filter">运输状态</label>
                    <select id="transport-status-filter">
                        <option value="all">全部</option>
                        <option value="in-transit">在途</option>
                        <option value="delivered">已送达</option>
                        <option value="cancelled">已取消</option>
                    </select>
                </div>
                <div class="filter-group">
                    <label for="transport-date-filter">运输日期</label>
                    <input type="date" id="transport-date-filter">
                </div>
                <button class="btn btn-primary-custom" id="filter-button">筛选</button>
                <button class="btn btn-secondary-custom" id="reset-button">重置</button>
            </div>

            <table id="transport-list" class="transport-list bg-white shadow-md rounded mb-4">
                <thead>
                <tr>
                    <th class="p-2 border-b">#</th>
                    <th class="p-2 border-b">订单编号</th>
                    <th class="p-2 border-b">发货地址</th>
                    <th class="p-2 border-b">收货地址</th>
                    <th class="p-2 border-b">运输状态</th>
                    <th class="p-2 border-b">发货时间</th>
                    <th class="p-2 border-b">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="p-2 border-b">1</td>
                    <td class="p-2 border-b">T001</td>
                    <td class="p-2 border-b">北京市朝阳区</td>
                    <td class="p-2 border-b">上海市浦东新区</td>
                    <td class="p-2 border-b"><span class="transport-status transport-status-in-transit">在途</span></td>
                    <td class="p-2 border-b">2025-04-01</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom" onclick="openTransportModal('T001', '北京市朝阳区', '上海市浦东新区', '在途', '2025-04-01')">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
                    </td>
                </tr>1
                <tr>
                    <td class="p-2 border-b">2</td>
                    <td class="p-2 border-b">T002</td>
                    <td class="p-2 border-b">广州市天河区</td>
                    <td class="p-2 border-b">深圳市福田区</td>
                    <td class="p-2 border-b"><span class="transport-status transport-status-delivered">已送达</span></td>
                    <td class="p-2 border-b">2025-04-02</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom" onclick="openTransportModal('T002', '广州市天河区', '深圳市福田区', '已送达', '2025-04-02')">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
                    </td>
                </tr>
                <tr>
                    <td class="p-2 border-b">3</td>
                    <td class="p-2 border-b">T003</td>
                    <td class="p-2 border-b">杭州市西湖区</td>
                    <td class="p-2 border-b">南京市鼓楼区</td>
                    <td class="p-2 border-b"><span class="transport-status transport-status-cancelled">已取消</span></td>
                    <td class="p-2 border-b">2025-04-03</td>
                    <td class="p-2 border-b">
                        <button class="btn btn-sm btn-primary-custom" onclick="openTransportModal('T003', '杭州市西湖区', '南京市鼓楼区', '已取消', '2025-04-03')">查看详情</button>
                        <button class="btn btn-sm btn-warning bg-yellow-500 text-white p-1 rounded hover:bg-yellow-600">编辑</button>
                    </td>
                </tr>
                </tbody>
            </table>

            <div class="pagination flex justify-between items-center mt-4">
                <div>
                    <span id="currentPageInfo">当前第 1 页</span>
                </div>
                <div class="flex space-x-2">
                    <button onclick="prevPage()" class="btn btn-secondary-custom">上一页</button>
                    <div class="flex space-x-1 pagination-buttons">
                        <!-- 动态生成页码按钮 -->
                    </div>
                    <button onclick="nextPage()" class="btn btn-secondary-custom">下一页</button>
                </div>
            </div>

</div>
<!-- 运输详情模态框 -->
<div id="transportModal" class="modal">
    <div class="modal-content bg-white p-4 rounded m-8 relative">
        <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeTransportModal()">&times;</span>
        <h2 class="text-xl font-bold mb-4">运输详情</h2>
        <div class="order-detail">
            <div class="detail-section mb-4">
                <h3 class="text-lg font-bold mb-2">基本信息</h3>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">订单编号</div>
                    <div class="detail-value w-3/4" id="transport-order-id"></div>
                </div>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">发货地址</div>
                    <div class="detail-value w-3/4" id="transport-sender-address"></div>
                </div>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">收货地址</div>
                    <div class="detail-value w-3/4" id="transport-receiver-address"></div>
                </div>
            </div>
            <div class="detail-section mb-4">
                <h3 class="text-lg font-bold mb-2">运输信息</h3>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">运输状态</div>
                    <div class="detail-value w-3/4" id="transport-status-detail"></div>
                </div>
                <div class="detail-row flex mb-1">
                    <div class="detail-label w-1/4 font-bold">发货时间</div>
                    <div class="detail-value w-3/4" id="transport-send-time"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 编辑运输信息模态框 -->
<div id="editTransportModal" class="modal">
    <div class="modal-content bg-white p-4 rounded m-8 relative max-w-2xl">
        <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeEditTransportModal()">&times;</span>
        <h2 class="text-xl font-bold mb-4">编辑运输信息</h2>
        <form id="editTransportForm">
            <input type="hidden" id="edit-order-id">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div class="form-group">
                    <label for="edit-sender-address" class="block mb-1 font-bold">发货地址</label>
                    <input type="text" id="edit-sender-address" class="w-full p-2 border rounded">
                </div>
                <div class="form-group">
                    <label for="edit-receiver-address" class="block mb-1 font-bold">收货地址</label>
                    <input type="text" id="edit-receiver-address" class="w-full p-2 border rounded">
                </div>
                <div class="form-group">
                    <label for="edit-status" class="block mb-1 font-bold">运输状态</label>
                    <select id="edit-status" class="w-full p-2 border rounded">
                        <option value="in-transit">在途</option>
                        <option value="delivered">已送达</option>
                        <option value="cancelled">已取消</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-send-time" class="block mb-1 font-bold">发货时间</label>
                    <input type="date" id="edit-send-time" class="w-full p-2 border rounded">
                </div>
            </div>
            <div class="flex justify-end space-x-4">
                <button type="button" onclick="closeEditTransportModal()" class="btn btn-secondary-custom">取消</button>
                <button type="button" onclick="saveTransportChanges()" class="btn btn-primary-custom">保存</button>
            </div>
        </form>
    </div>
</div>

<!-- 批量导入运输订单模态框 -->
<div id="importTransportModal" class="modal">
    <div class="modal-content bg-white p-4 rounded m-8 relative max-w-2xl">
        <span class="close absolute top-2 right-2 text-gray-500 cursor-pointer" onclick="closeImportTransportModal()">&times;</span>
        <h2 class="text-xl font-bold mb-4">批量导入运输订单</h2>
        <div class="mb-4">
            <label class="block mb-2 font-bold">选择文件 (CSV格式)</label>
            <input type="file" id="transportFileInput" accept=".csv" class="w-full p-2 border rounded">
            <p class="text-sm text-gray-500 mt-1">请确保CSV文件包含订单编号、发货地址、收货地址、运输状态和发货时间列</p>
        </div>
        <div class="mb-4">
            <button onclick="downloadSampleCSV()" class="btn btn-secondary-custom">下载示例文件</button>
        </div>
        <div class="flex justify-end space-x-4">
            <button type="button" onclick="closeImportTransportModal()" class="btn btn-secondary-custom">取消</button>
            <button type="button" onclick="importTransportData()" class="btn btn-primary-custom">导入</button>
        </div>
    </div>
</div>
</div>
</body>
</html>
<script src="../js/管理员运输管理.js"></script>